<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ExtInfoWindow Example: new GMap2 events</title>
    <link type="text/css" rel="Stylesheet" media="screen" href="css/funkyBox.css"/>
    <style type="text/css">
      #map{
        width: 49%;
        height: 400px;
        float: left;
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q"></script>
    <script src="../src/extinfowindow_packed.js" type="text/javascript"></script>

    <script type="text/javascript">
      var map2;
      function load() {
        if (GBrowserIsCompatible()) {
          map2 = new GMap2(document.getElementById("map"));
          map2.setCenter(new GLatLng(39, -96), 4);
          map2.addControl(new GLargeMapControl());

          //marker with ext info window with a red skin
          var redIcon1 = new GIcon(G_DEFAULT_ICON);
          redIcon1.iconAnchor = new GPoint(0, 0);
          redIcon1.infoWindowAnchor = new GPoint(0, 0);

          marker = new GMarker( new GLatLng(32, -100), redIcon1);
          GEvent.addListener(marker, 'click', 
            function(){ 
              marker.openExtInfoWindow(
                map2,
                "extInfoWindow_funkyBox",
                "<p>Loading Content...</p>",
                {beakOffset: 2, ajaxUrl: 'ajax/ajaxEventsDemo.html'}
              ); 
            }
          );
        
          map2.addOverlay(marker);

          GLog.write("Tracking Events: extinfowindowopen, extinfowindowclose, extinfowindowbeforeclose, and extinfowindowupdate");
          GEvent.addListener(map2, 'extinfowindowupdate', function(){GLog.write("extinfowindowupdate found");});
          GEvent.addListener(map2, 'extinfowindowopen', function(){GLog.write("extinfowindowopen found");});
          GEvent.addListener(map2, 'extinfowindowbeforeclose', function(){GLog.write("extinfowindowbeforeclose found");});
          GEvent.addListener(map2, 'extinfowindowclose', function(){ GLog.write("extinfowindowclose found"); });
        }
      }
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>
